<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>主要内容区main</title>
<link href="${pageContext.request.contextPath }/css/css.css" type="text/css" rel="stylesheet" />
<link href="${pageContext.request.contextPath }/css/main.css" type="text/css" rel="stylesheet" />
<link rel="shortcut icon" href="${pageContext.request.contextPath }/images/main/favicon.ico" />
<link rel="stylesheet" href="${pageContext.request.contextPath }/css/common.css"/>
<script src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/main.js" type="text/javascript"></script>
<style>
body{overflow-x:hidden; background:#f2f0f5; padding:15px 0px 10px 5px;}
#searchmain{ font-size:12px;}
#search{ font-size:12px; background:#548fc9; margin:10px 10px 0 0; display:inline; width:100%; color:#FFF; float:left}
#search form span{height:40px; line-height:40px; padding:0 0px 0 10px; float:left;}
#search form input.text-word{height:24px; line-height:24px; width:180px; margin:8px 0 6px 0; padding:0 0px 0 10px; float:left; border:1px solid #FFF;}
#search form input.text-but{height:24px; line-height:24px; width:55px; background:url(${pageContext.request.contextPath }/images/main/list_input.jpg) no-repeat left top; border:none; cursor:pointer; font-family:"Microsoft YaHei","Tahoma","Arial",'宋体'; color:#666; float:left; margin:8px 0 0 6px; display:inline;}
#search a.add{ background:url(${pageContext.request.contextPath }/images/main/add.jpg) no-repeat -3px 7px #548fc9; padding:0 10px 0 26px; height:40px; line-height:40px; font-size:14px; font-weight:bold; color:#FFF; float:right}
#search a:hover.add{ text-decoration:underline; color:#d2e9ff;}
#main-tab{ border:1px solid #eaeaea; background:#FFF; font-size:12px;}
#main-tab th{ font-size:12px; background:url(${pageContext.request.contextPath }/images/main/list_bg.jpg) repeat-x; height:32px; line-height:32px;}
#main-tab td{ font-size:12px; line-height:40px;}
#main-tab td a{ font-size:12px; color:#548fc9;}
#main-tab td a:hover{color:#565656; text-decoration:underline;}
.bordertop{ border-top:1px solid #ebebeb}
.borderright{ border-right:1px solid #ebebeb}
.borderbottom{ border-bottom:1px solid #ebebeb}
.borderleft{ border-left:1px solid #ebebeb}
.gray{ color:#dbdbdb;}
td.fenye{position:fixed; bottom:10px;right:10px;padding:10px 0 0 0; text-align:right;}
.bggray{ background:#f9f9f9}

</style>
</head>
<body>
<script type="text/javascript">

function show_product(id) {
			$.post("${pageContext.request.contextPath }/adorder?method=findProduct",{"oid":id},function(obj){
				
					$(obj).each(function() {
						   var tr=$("<tr id='sssss' onMouseOut='this.style.backgroundColor='#ffffff'' onMouseOver='this.style.backgroundColor='#edf5ff''></tr>");
						    var td1=$("<td width='45%' align='center' valign='middle' class='borderright borderbottom'>"+this.product.pname+"</td>");//拼接td，如果有td里有内容拼接时候填充进去
						    var td2=$("<td align='center' valign='middle' class='borderright borderbottom'>"+"<img src="+this.product.pimage+"  border='0' width='40' height='40'>"+"</td>");//拼接td，如果有td里有内容拼接时候填充进去
						    var td3=$("<td align='center' valign='middle' class='borderright borderbottom'>"+this.count+"</td>");//拼接td，如果有td里有内容拼接时候填充进去
						    var td4=$("<td align='center' valign='middle' class='borderright borderbottom'>"+this.subtotal+"</td>");//拼接td，如果有td里有内容拼接时候填充进去
						    //将td添加到tr里
						    tr.append(td1);
						    tr.append(td2);
						    tr.append(td3);
						    tr.append(td4);
						     
						    //再将tr添加到表格内
						    $("#tta").append(tr);
				});
			},"json"); 
		 $('#bgPop,#pop').show();
		 $("#pop-close").click(function () {
			  $("#sssss").remove();
			  $('#bgPop,#pop').hide();
			  $("#sssss").remove();
		});
}
function upstate(id,state) {
	var state = parseInt(state);
	state = state+1;
	var url="${pageContext.request.contextPath }/adorder?method=upState&oid="+id+"&state="+state;
	if(state==2){
		if(confirm("商品已发货？")){
			window.location.href = url;
		}
	}
	if(state==3){
		if(confirm("已鉴定与用户描述相符？")){
			window.location.href = url;
		}
	}
}
function message(id) {
	$("#bgPop_,#pop_"+id).show();
}

function popclose(id) {
	$('#bgPop_,#pop_'+id).hide();
}
</script>
	<!--main_top-->
<table width="99%" border="0" cellspacing="0" cellpadding="0" id="searchmain">
  <tr>
    <td width="99%" align="left" valign="top">您的位置：
    	<c:if test="${state==0 }">未付款订单</c:if>
    	<c:if test="${state==1 }">已付款订单</c:if>
    	<c:if test="${state==2 }">在途订单</c:if>
    	<c:if test="${state==3 }">已完成订单</c:if>
    </td>
  </tr>
  <tr>
    <td align="left" valign="top">
    <table width="100%" border="0" cellspacing="0" cellpadding="0" id="search">
  		<tr>
   		 <td width="90%" align="left" valign="middle">
         </td>
  		</tr>
	</table>
    </td>
  </tr>
  <tr>
    <td align="left" valign="top">
    <div class="box">
    <table width="100%" border="0" cellspacing="0" cellpadding="0" id="main-tab">
      <tr>
        <th align="center" valign="middle" class="borderright">订单编号</th>
        <th align="center" valign="middle" class="borderright">用户</th>
        <th align="center" valign="middle" class="borderright">商品详情</th>
        <th align="center" valign="middle" class="borderright">总价</th>
        <th align="center" valign="middle" class="borderright">收货详情</th>
        <th align="center" valign="middle" class="borderright">下单时间</th>
        <th align="center" valign="middle" class="borderright">操作</th>
      </tr>
      <c:forEach items="${order }" var="o">
     
      <tr id="${o.oid }" onMouseOut="this.style.backgroundColor='#ffffff'" onMouseOver="this.style.backgroundColor='#edf5ff'">
        <td align="center" width="25%"  valign="middle" class="borderright borderbottom">${o.oid }</td>
        <td align="center" width="25%" valign="middle" class="borderright borderbottom">${o.uid }</td>
        <td align="center" valign="middle" class="borderright borderbottom" ><a href="javascript:void(0)" onClick="show_product('${o.oid }')" class="click_pop">订单商品</a></td>
        <td align="center" valign="middle" class="borderright borderbottom" >${o.total }</td>
        <td align="center" valign="middle" class="borderright borderbottom">
		<a href="javascript:void(0)" onClick="message('${o.oid }')" class="click_pop">收货人信息</a>
		</td>
        <td align="center" valign="middle" class="borderright borderbottom">${o.ordertime }</td>
        <td align="center" valign="middle" class="borderright borderbottom">
        <a href="javascript:upstate('${o.oid }','${o.state}');" target="mainFrame" class="bounceIn">
        	<c:if test="${o.state == 1}">已发货</c:if>
        	<c:if test="${o.state == 2}">已确认收货</c:if>
        	</a></td>
      </tr>
      <!--遮罩层-->
			<div id="bgPop_${o.oid }" class="bgPop"></div>
			<!--弹出框-->
			<div id="pop_${o.oid }" class="pop">
			    <div id="pop-top_1" class="pop-top">
			        <h2>收货详情</h2>
			        <span onclick="popclose('${o.oid }')" class="pop-close">Ｘ</span>
			    </div>
			    <div class="pop-content">
			        <div class="pop-content-right">
			            <p>收货人：${o.name }</p>
			            <p>联系方式：${o.telephone }</p>
			            <p>收货地址：${o.address }</p>
			        </div>
			    </div>
			</div>
      </c:forEach>
    </table>
    </div>
    </td>
    </tr>
</table>
<!--遮罩层-->
		<div id="bgPop" class="bgPop"></div>
		<!--弹出框-->
		<div id="pop" class="pop" style="display:none">
		    <div class="pop-top">
		        <h2>购买详情</h2>
		        <span id="pop-close" class="pop-close">Ｘ</span>
		    </div>
		    <div class="pop-content" style="display: block;">
		    <table width="99%" border="0" cellspacing="0" cellpadding="0" id="tta">
		    <tr>
	    		<td align="center" valign="middle" class="borderright">商品名</td>
	    		<td align="center" valign="middle" class="borderright">图片</td>
	    		<td align="center" valign="middle" class="borderright">数量</td>
	    		<td align="center" valign="middle" class="borderright">小计</td>
		  	</tr>
		  
		    </table>
		    </div>
		</div>
</body>
</html>